<template>
  <div class="pagination-content">
    <div class="pagination-container" style="float: left; margin-bottom: 30px">
      <el-pagination
        background
        @size-change="handleSizeChange"
        :firstPage="firstPage"
        @current-change="handleCurrentChange"
        :page-sizes="[20, 100, 300, 500]"
        :page-size="limit"
        layout="slot"
        :total="total"
        style="float: left"
      >
        <el-button
          :disabled="page === firstPage"
          class="btns"
          size="small"
          @click="toFirstPage"
          >首页</el-button
        >
      </el-pagination>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="pageSizes"
        :page-size="limit"
        :lastPage="lastPage"
        layout="prev, pager, next, slot, jumper"
        :total="total"
        style="float: left; margin-left: -10px"
      >
        <el-button
          :disabled="page === lastPage"
          class="btns"
          size="small"
          @click="toLastPage"
          >尾页</el-button
        >
        <span style="margin: 0 5px">共{{ total }}条数据</span>
      </el-pagination>
      <el-button class="btns" @click="handleGo" size="small">跳转</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "pagination",
  props: {
    // 父页面传值
    page: {
      type: Number,
    },
    limit: {
      type: Number,
    },
    total: {
      type: Number,
    },
    pageSizes: {
      type: Array,
    },
  },
  data() {
    return {
      firstPage: 1,
    };
  },
  created() {},
  computed: {
    lastPage: function () {
      return Math.ceil(this.total / this.limit);
    },
  },
  methods: {
    // 首页
    toFirstPage() {
      this.$emit("handleChildGetList", this.firstPage, this.limit);
    },
    // 尾页
    toLastPage() {
      // this.page = this.lastPage;
      this.$emit("handleChildGetList", this.lastPage, this.limit);
    },
    handleSizeChange(val) {
      this.$emit("handleChildGetList", 1, val);
    },
    handleCurrentChange(val) {
      this.$emit("handleChildGetList", val, this.limit);
    },
    handleGo() {
      this.$emit("handleChildGetList", this.page, this.limit);
    },
  },
};
</script>
<style lang="less">
.pagination-content {
  display: flex;
  height: 34px;
  display: flex;
  justify-content: center;
  .btns {
    // padding: 7px 12px;
    background: #4677b9;
    color: white;
    margin-left: 10px;
  }
}
</style>
